import React, { useState, useEffect } from 'react';
import { Outlet, useLocation, Link } from 'react-router-dom';
import '../../styles/AuthPage.css';

// 背景图片数组
const backgroundImages = [
  '/Auth-background/fluid-art.png',
  '/Auth-background/tulips.png',
  '/Auth-background/green-sky.png',
  '/Auth-background/tulips-field-windmill.png',
  '/Auth-background/astrophotography.png',
  '/Auth-background/burning-rose.png',
  '/Auth-background/blue-constellation.png',
];

const AuthPage = () => {
  const location = useLocation();
  const [isLoginActive, setIsLoginActive] = useState(location.pathname.includes('login'));
  const [activePanel, setActivePanel] = useState(isLoginActive ? 'login' : 'register');
  // 添加当前背景图片索引状态
  const [currentBackground, setCurrentBackground] = useState(0);

  // 当路由变化时更新激活状态
  useEffect(() => {
    const loginActive = location.pathname.includes('login');
    setIsLoginActive(loginActive);
    setActivePanel(loginActive ? 'login' : 'register');
  }, [location]);

  // 切换背景图片的函数
  const changeBackground = () => {
    setCurrentBackground((prev) => (prev + 1) % backgroundImages.length);
  };

  // 定时切换背景图片的副作用
  useEffect(() => {
    // 每5秒切换一次背景图片
    const interval = setInterval(changeBackground, 5000);
    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  // 图片预加载函数(防止闪烁)
  const preloadImages = (imageArray) => {
    imageArray.forEach((image) => {
      const img = new Image();
      img.src = image;
    });
  };

  useEffect(() => {
    preloadImages(backgroundImages);
  }, []);

  return (
    <div className="auth-container">
      {/* 修改背景区域，添加动态背景图片 */}
      <div 
        className="auth-background" 
        style={{ 
          backgroundImage: `url(${backgroundImages[currentBackground]})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }}
      >
        <div className="auth-overlay"></div>
      </div>
      <div className="auth-left-banner">
        <span className="auth-left-title">CineMind AI</span>
      </div>
      <div className="slider-container">
        <div className={`slider-inner ${isLoginActive ? 'show-login' : 'show-register'}`}>
          {/* 登录面板 */}
          <div className={`form-panel ${activePanel === 'login' ? 'active-panel' : ''}`}>
            <div className="auth-logo">
              <h1>🎬 CineMind AI</h1>
              <p>智能情感化电影推荐助手</p>
            </div>
            <Outlet />
            <div className="auth-links">
              <span>还没有账号？</span>
              <Link to="/auth/register">立即注册</Link>
            </div>
          </div>
          
          {/* 注册面板 */}
          <div className={`form-panel ${activePanel === 'register' ? 'active-panel' : ''}`}>
            <div className="auth-logo">
              <h1>🎬 CineMind AI</h1>
              <p>智能情感化电影推荐助手</p>
            </div>
            <Outlet />
            <div className="auth-links">
              <span>已有账号？</span>
              <Link to="/auth/login">立即登录</Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AuthPage;
